<template>
<div class="dialog-wrapper">

  <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
     <el-dialog
      width="60%"
      title="内层 Dialog"
      :visible.sync="innerVisible"
      append-to-body>
      <div slot="footer" class="inner-dialog-footer">
        <el-button @click="innerClose">取 消</el-button>
        <el-button type="primary" @click="innerSure">提 交</el-button>
      </div>
    </el-dialog>

    <el-form label-width="80px" :model="ruleForm">
      <el-form-item label="名字" prop="username">
        <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-input type="text" v-model="ruleForm.gender" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input type="text" v-model="ruleForm.age" autocomplete="off"></el-input>
      </el-form-item>

       <el-form-item label="地址" prop="address">
        <el-input type="text" v-model="ruleForm.address" autocomplete="off"></el-input>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="outerClose">取 消</el-button>
      <el-button type="primary" @click="outerSure">确 定</el-button>
    </div>
  </el-dialog> 
</div>
</template>

<script>
export default {
  props: {
    outerVisible: {
      type: Boolean,
      default: false
    },
    innerVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      innerShow: false,
      outerShow: false,
      birthday: '',
      ruleForm: {
        username: '',
        gender: '',
        age: '',
        address: '',
      }
    }
  },
  methods: {
    innerClose() {
      this.$emit('innerClose', false)
    },
    innerSure() {
      // console.log(this.ruleForm, 'ruleForm')
      this.$emit('innerSure', this.ruleForm)
    },
    outerClose() {
      // 1. 外层取消
      this.$emit('outerClose', false)
    },
    outerSure() {
      console.log('外层事件')
      // 2. 外层确定
      this.$emit('outerSure', true)
    }
  },

}
</script>